<template>
  <el-dialog class="teacher-dlg" title="教师信息" width="40%" :visible.sync="innerVisible">
    <el-form ref="teacherForm" :model="teacherRecord" :rules="teacherRules"
    label-position="right" label-width="105px" size="mini" status-icon>
      <el-row>
        <el-col :span="12">
          <el-upload
            class="avatar-uploader"
            action="/file"
            :show-file-list="false"
            :on-success="(res,file)=>{$emit('upload-success',res,file);}"
            :before-upload="beforeAvatarUpload"
            :data="{'type':'teacher'}">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-form-item label="所属系" prop="xbh">
            <el-select style="width:100%;" v-model="teacherRecord.xbh" placeholder="请选择系" filterable>
              <template v-for="item in departmentData">
                <el-option :key="item.xbh" :label="item.xmc" :value="item.xbh">
                  <span style="float: left">{{ item.xmc }}({{item.xymc}})</span>
                  <span style="float: right; font-size: 13px; margin-left:5px;">{{ item.xbhzdy }}</span>
                </el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="工号(用户名)" prop="gh">
            <el-input v-model="teacherRecord.gh"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="xm">
            <el-input v-model="teacherRecord.xm"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="xb">
            <el-select style="width:100%;" v-model="teacherRecord.xb" placeholder="请选择">
              <template v-for="item in ['男','女','其他']">
                <el-option :key="item" :label="item" :value="item"></el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期" prop="csrq">
            <el-date-picker style="width:100%;" v-model="teacherRecord.csrq" type="date" value-format="timestamp" placeholder="请选择">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="手机" prop="sj">
            <el-input v-model="teacherRecord.sj"></el-input>
          </el-form-item>
          <el-form-item label="办公电话" prop="bgdh">
            <el-input v-model="teacherRecord.bgdh"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="yx">
            <el-input v-model="teacherRecord.yx"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="政治面貌" prop="zzmm">
            <el-select style="width:100%;" v-model="teacherRecord.zzmm" placeholder="请选择">
              <template v-for="item in zzmmData">
                <el-option :key="item.zzmm" :label="item.zzmm" :value="item.zzmm">
                  <span style="float: left">{{item.zzmm}}</span>
                  <span style="float: right; font-size: 13px; margin-left:5px;">{{ item.bh }}</span>
                </el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="入职日期" prop="rzsj">
            <el-date-picker style="width:100%;" v-model="teacherRecord.rzsj" type="date" value-format="timestamp" placeholder="请选择">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="职称" prop="zc">
            <el-select style="width:100%;" v-model="teacherRecord.zc" placeholder="请选择">
              <template v-for="item in zcData">
                <el-option :key="item.zc" :label="item.zc" :value="item.zc">
                  <span style="float: left">{{item.zc}}</span>
                  <span style="float: right; font-size: 13px; margin-left:5px;">{{ item.zcpym }}</span>
                </el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="职务" prop="zw">
            <el-select style="width:100%;" v-model="teacherRecord.zw" placeholder="请选择">
              <template v-for="item in zwData">
                <el-option :key="item.zw" :label="item.zw" :value="item.zw">
                  <span style="float: left">{{item.zw}}</span>
                  <span style="float: right; font-size: 13px; margin-left:5px;">{{ item.zwpym }}</span>
                </el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="籍贯" prop="jg">
            <el-input v-model="teacherRecord.jg"></el-input>
          </el-form-item>
          <el-form-item label="学位" prop="xw">
            <el-select style="width:100%;" v-model="teacherRecord.xw" placeholder="请选择">
              <template v-for="item in xwData">
                <el-option :key="item.xw" :label="item.xw" :value="item.xw">
                  <span style="float: left">{{item.xw}}</span>
                  <span style="float: right; font-size: 13px; margin-left:5px;">{{ item.xwpym }}</span>
                </el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="学历" prop="xl">
            <el-select style="width:100%;" v-model="teacherRecord.xl" placeholder="请选择">
              <template v-for="item in xlData">
                <el-option :key="item.xl" :label="item.xl" :value="item.xl">
                  <span style="float: left">{{item.xl}}</span>
                  <span style="float: right; font-size: 13px; margin-left:5px;">{{ item.xlpym }}</span>
                </el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="毕业学校" prop="byxx">
            <el-input v-model="teacherRecord.byxx"></el-input>
          </el-form-item>
          <el-form-item label="所学专业" prop="sxzy">
            <el-input v-model="teacherRecord.sxzy"></el-input>
          </el-form-item>
          <el-form-item label="研究方向" prop="yjfx">
            <el-input type="textarea" :rows="2" v-model="teacherRecord.yjfx"></el-input>
          </el-form-item>
          <el-form-item label="教师简介" prop="jsjs">
            <el-input type="textarea" :rows="3" v-model="teacherRecord.jsjs"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-checkbox v-model="teacherRecord.sfds" label="是否导师" true-label="1" false-label="0">
      </el-checkbox>
      <el-checkbox v-model="teacherRecord.sfqy" label="是否启用" true-label="1" false-label="0">
      </el-checkbox>
      <el-row>
        <template v-if="hasResetBtn">
          <el-button v-if="teacherRecord.gh !==''" @click="$emit('reset-password')" type="warning" size="mini">重置密码</el-button>
        </template>
        <el-button @click="onConfirm" type="primary" size="mini">确定</el-button>
        <el-button @click="innerVisible=false" size="mini">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>   
</template>
<script>
export default {
  name:"teacherDlg",
  props:{
    teacherRecord:{
      type:Object,
      default:()=>{
        return {};
      }
    },
    teacherRules:{
      type:Object,
      default:()=>{
        return {};
      }
    },
    teacherDlgVisible:{
      type:Boolean,
      default:false
    },
    hasResetBtn:{
      type:Boolean,
      default:false
    }
  },
  watch:{
    teacherDlgVisible: function (val, oldVal) {
      this.innerVisible = val;
    },
    innerVisible:function(val, oldVal){
      if(!val){
        this.$emit('close');
      }
    }
  },
  methods:{
    beforeAvatarUpload:function(file) {//上传前检查
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    onConfirm:function(){
      let me = this;
      // 验证信息
      let ret;
      me.$refs.teacherForm.validate((result, what) => {
        ret = result;
      });
      if (!ret) {
        me.$message.error("表单信息有误");
        return;
      }else{
        me.$emit('confirm');
      }

    }
  },
  data(){
    return {
      innerVisible:false,
      departmentData:[],
      zcData:[],
      zwData:[],
      zzmmData:[],
      xwData:[],
      xlData:[],
      imageUrl: '',
      fileList: []
    };
  },
  created(){
    let me = this;
    // 系
    me.getRequest("/jcXxxb", {}).then(resp => {
      if(resp.status == 200) {
        me.departmentData = resp.data;
      }
    });

    // 职称
    me.getRequest("/static/json/yiyuan_zhicheng.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.zcData = resp.data;
      }
    });
    // 职务
    me.getRequest("/static/json/yiyuan_zhiwu.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.zwData = resp.data;
      }
    });
    // 政治面貌
    me.getRequest("/static/json/zhengzhimianmao.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.zzmmData = resp.data;
      }
    });
    // 学历
    me.getRequest("/static/json/xueli.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.xlData = resp.data;
      }
    });
    // 学位
    me.getRequest("/static/json/xuewei.json",{}).then(resp=>{
      if(resp.status == 200) {
        me.xwData = resp.data;
      }
    });
  }
}
</script>
<style lang="scss">
@import "@/assets/scss/basic.scss";

.teacher-dlg{
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: $--color-primary;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 134px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 134px;
    height: 178px;
    display: block;
  }
}
</style>
